<template>
    <div class="w1200 hospital_detail_page">
        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item><nuxt-link to="/certification">查资质</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item><nuxt-link to="/certification?type=3">材料资质</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item>{{ oInfo.materialName }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 内容 开始 -->
        <div class="content mt20">

            <!-- 左侧内容 开始 -->
            <div class="left_box">
                <div class="activity_box mb20">

                    <div class="mt20 hospital_info">
                        <div class="avatar">
                            <li-image :src="oInfo.brandLogo" class="img"  :alt="`${oInfo.materialName}价格表`" />
                        </div>
                        <div class="info">
                            <div class="title">
                                <h1 class="name">{{ oInfo.materialName }}</h1>
                                <h1 class="sub">{{ oInfo.titleName }}</h1>
                            </div>
                            <div class="address">
                                <span>产地：</span>
                                <span>{{ oInfo.materialOriginPlace }}</span>
                            </div>
                            <div class="address">
                                <span>所属公司：</span>
                                <span>{{ oInfo.belongCompany }}</span>
                            </div>
                        </div>
                    </div>

                    <TabMenus :list="tabbarList" @change="onTabbarChange" />

                    <!-- 发展历程 开始 -->
                    <div class="row_box" ref="tabbar_0">
                        <div class="row_head">发展历程</div>
                        <div class="row_content">
                            <div class="timeline">
                                <div class="time_cell" v-for="(item, index) in (oInfo.developmentHistory || [])"
                                    :key="index">
                                    <div class="name">{{ item.year || '' }}年：</div>
                                    <div class="txt">{{ item.history }}</div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- 发展历程 end -->

                    <!-- 产品型号 开始 -->
                    <div class="row_box" ref="tabbar_1">
                        <div class="row_head">产品型号</div>
                        <div class="row_content">
                            <div class="model_list">
                                <MaterialModel v-for="(item,index) in (oInfo.productModelInfoList || [])" :key="`model_${index}`" :info="item" :alt="`${oInfo.materialName}-${item.modelName}`" />
                            </div>
                            
                        </div>
                    </div>
                    <!-- 产品型号 end -->

                    <!-- 更多信息 开始 -->
                    <div class="row_box" ref="tabbar_2">
                        <div class="row_head">更多信息</div>
                        <div class="row_content">
                            <div class="outpatientIntroduce" v-html="oInfo.detailIntroduce"></div>
                        </div>
                    </div>
                    <!-- 更多信息 end -->

                </div>




            </div>
            <!-- 左侧内容 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 人气商品 开始 -->
                <div class="problem_box">
                    <div class="head">人气商品</div>
                    <div class="list_box goods_list">
                            <Goods v-for="(item, index) in goodsList" :key="`goods_${index}`" :info="item" />
                    </div>
                </div>
                <!-- 人气商品 end -->

            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->


    </div>
</template>
<script>
import { Rate } from 'element-ui';
import TabMenus from '@/components/tabbar/index.vue'
import SettleIn from '@/components/apply/settlein.vue'
import CerHosp from '@/components/hospital/cerHosp.vue'
import MaterialModel from '@/components/material/model.vue'
import Goods from '@/components/goods/index.vue'
import {
    IMAGEURL,
    GET_QUALIFICATION_MATERIAL_INFO,
    GET_GOODS_SEARCH
} from "@/http/interface";
import { api as viewerApi } from "v-viewer";
import "viewerjs/dist/viewer.css";
export default {
    components: {
        [Rate.name]: Rate,
        TabMenus,
        SettleIn,
        CerHosp,
        MaterialModel,
        Goods
    },
    data() {
        return {
            tabbarList: [
                { name: '发展历程', id: 0 },
                { name: '产品型号', id: 1 },
                { name: '更多信息', id: 2 },
            ],
            oInfo: {},
            title: "",
            description: "",
            keywords: "",
            goodsList: [],
        }
    },
    head() {
        return {
            title: this.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.keywords,
                },
                {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/inquire/material/${this.materialId}`
                }
            ],
            link:[
        {ref:'canonical',href:`${this.$domain}/material`}
      ]
        };
    },
    async asyncData({ query, $axios,params }) {

        let _params = { id: params.id };
        let res = await $axios.get(GET_QUALIFICATION_MATERIAL_INFO, {
            params: _params,
        });
        console.log(res)

        let oInfo = res.data || {};

        // 商品信息
        let ges = await $axios.get(GET_GOODS_SEARCH, { params: { pageNumber: 1, pageSize: 5 } })
        let gobj = ges.data || {}
        let goodsList = gobj.list || []

        return {
            oInfo,
            title: oInfo.seoTitle,
            keywords: oInfo.seoKeywords,
            description: oInfo.seoDescription,
            goodsList,
            materialId:params.id
        };
    },
    methods: {

        // 动态获取className
        getClassName(index) {
            if (index % 3 == 0) {
                return ''
            }
            if (index % 3 == 1) {
                return 'blue'
            }
            if (index % 3 == 2) {
                return 'dark_blue'
            }
        },

        // 获取图片列表
        getImages(str) {
            if (!str) {
                return []
            }
            let list = str.split(',')
            console.log(list)
            return list;
        },

        // 监听菜单点击
        onTabbarChange(e) {
            let _dom = this.$refs['tabbar_' + e];
            if (_dom) {
                _dom.scrollIntoView();
            }
        },

        // 预览图片
        previewImage(arr) {
            let list = []
            arr.map(k => {
                let _path = `${IMAGEURL}${k}`
                list.push(_path);
            })
            viewerApi({
                images: list,
                options: {
                    zIndex: 99999,
                },
            });
        }

    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/index/certification/material.less';
</style>